<template>
  <div class="app-container">
    <div class="searchform">
      <!-- 查询条件 -->
      <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="userName" label="姓名">
              <el-input v-model="search.userName" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="phone" label="手机号">
              <el-input v-model="search.phone" clearable/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="seriesId" label="意向车型">
              <r-select
                v-model="search.seriesId"
                selectid="series_id"
                selectname="series_name"
                url="/productDisplay/getTmSeies"
                model="DMSCLOUD_VEHICLE"
                placeholder="请选择车系"
                filterable
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="driveDate" label="试驾日期">
              <el-date-picker v-model="search.driveDate" value-format="yyyy-MM-dd" type="date"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="preBuyDate" label="预购时间">
              <el-date-picker v-model="search.preBuyDate" value-format="yyyy-MM-dd" type="date"/>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <!-- 活动信息列表 -->
    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">试驾维护</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button v-if="userInfo.whiteFlag === 10041001" type="primary" icon="el-icon-download" @click="exportData" >导出</el-button>
          </el-button-group>
        </div>
      </div>
      <baseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column type="index" label="序号" min-width="50"/>
        <el-table-column align="center" label="操作" min-width="80">
          <template slot-scope="scope">
            <el-tooltip class="item" content="编辑" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="editOpen(scope.row)"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="客户名称" min-width="110" />
        <el-table-column v-if="userInfo.whiteFlag === 10041001" prop="phone" label="电话" min-width="110"/>
        <el-table-column prop="dealer_name" label="经销商" min-width="110" />
        <el-table-column prop="series_name" label="意向车型" min-width="120"/>
        <el-table-column prop="sell_user" label="销售顾问" min-width="150" />
        <el-table-column :formatter="dateFormat" :sort-method="sortDriveTime" prop="drive_date" label="试驾时间" min-width="120" sortable/>
        <el-table-column :formatter="dateFormat" :sort-method="sortBuyTime" prop="pre_buy_date" label="预购时间" min-width="120" sortable/>
        <el-table-column prop="remark" label="备注" min-width="150" />
      </BaseTable>
    </div>

    <!-- 弹框 -->
    <div v-if="editDialog">
      <el-dialog
        v-dialogDrag
        ref="editDialog"
        :close-on-click-modal="false"
        :visible.sync="editDialog"
        :before-close="editClose"
        title="编辑试驾信息"
        width="70%"
      >
        <!-- 查询条件 -->
        <el-form ref="editFrom" :model="editForm" size="mini" label-width="90px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="8">
              <el-form-item prop="dealer_name" label="经销商">
                <el-input v-model="editForm.dealer_name" readonly>
                  <i slot="suffix" class="el-input__icon el-icon-circle-plus" @click="dealerOpen"/>
                  <!-- <i slot="suffix" class="el-input__icon el-icon-error" @click="dealerClose"/> -->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="8">
              <el-form-item prop="sell_user" label="销售顾问">
                <el-input v-model="editForm.sell_user" readonly >
                  <i slot="suffix" class="el-input__icon el-icon-circle-plus" @click="sellOpen"/>
                  <!-- <i slot="suffix" class="el-input__icon el-icon-error" @click="sellClose"/> -->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="8">
              <el-form-item prop="pre_buy_date" label="预购时间" clearable>
                <el-date-picker v-model="editForm.pre_buy_date" value-format="yyyy-MM-dd" type="date"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="24">
              <el-form-item prop="remark" label="备注">
                <el-input v-model="editForm.remark" placeholder="" type="textarea" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <el-button type="text">
            <i class="el-icon-search magnifier" />
          </el-button>
          <el-button type="primary" @click="confirmEditInfo">确 定</el-button>
          <el-button @click="editClose">取 消</el-button>
        </div>
      </el-dialog>
    </div>

    <dealerSelect :open-select-dealer.sync="openSelectDealer" @dealerClose="dealerClose" @getDealerInfo="dealerInfo"/>
    <sellSelect v-if="openSelectSell" :open-select-sell.sync="openSelectSell" :dealer-code="editForm.dealer_code" @sellClose="sellClose" @getSellInfo="sellInfo"/>
  </div>
</template>

<script>
import { queryDrive, exportDrive, editDrive } from '@/api/admin/auth/gms/userDrive.js'
import BaseTable from '@/components/BaseTable'
import filterCode from '@/components/Checkbox/filtercode'
import rSelect from '@/components/Select/Select'
import dealerSelect from '@/views/admin/auth/gms/userDrive/selectDealer.vue'
import sellSelect from '@/views/admin/auth/gms/userDrive/selectSell.vue'
import formMixins from '@/mixins/formMixins'
import moment from 'moment'
import { exportFile } from '@/utils'
// eslint-disable-next-line no-unused-vars
import _ from 'lodash'
import { mapGetters } from 'vuex'

export default {
  name: 'UserDrive',
  components: {
    BaseTable,
    rSelect,
    filterCode,
    dealerSelect,
    sellSelect

  },
  mixins: [formMixins],
  data() {
    return {
      editDialog: false,
      openSelectDealer: false,
      openSelectSell: false,
      dealerCode: '',
      // 搜索栏
      search: {
        limit: 10,
        pageNum: 1,
        userName: '',
        phone: '',
        seriesId: '',
        driveDate: '',
        preBuyDate: ''
      },
      editForm: {
        drive_id: '',
        dealer_code: '',
        dealer_name: '',
        sell_user: '',
        sell_id: '',
        pre_buy_date: '',
        remark: ''
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    sortDriveTime(a, b) {
      let num1 = 0
      let num2 = 0
      if (a.drive_date) {
        num1 = Date.parse(a.drive_date).valueOf()
      }
      if (b.drive_date) {
        num2 = Date.parse(b.drive_date).valueOf()
      }
      return num1 - num2
    },
    sortBuyTime(a, b) {
      let num1 = 0
      let num2 = 0
      if (a.pre_buy_date) {
        num1 = Date.parse(a.pre_buy_date).valueOf()
      }
      if (b.pre_buy_date) {
        num2 = Date.parse(b.pre_buy_date).valueOf()
      }
      return num1 - num2
    },
    // 查询试驾信息
    searchHandle() {
      const table = this.$refs['table']
      queryDrive(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    // 从经销商选择框获取信息
    dealerInfo(dealerInfo) {
      if (dealerInfo != '') {
        this.$set(this.editForm, 'dealer_name', dealerInfo.DEALER_NAME)
        this.editForm.dealer_code = dealerInfo.DEALER_CODE
        this.editForm.sell_user = ''
        this.editForm.sell_id = ''
      }
    },

    // 从销售顾问选择框中获取信息
    sellInfo(sellInfo) {
      if (sellInfo != '') {
        this.$set(this.editForm, 'sell_user', sellInfo.user_name)
        this.editForm.sell_id = sellInfo.user_id
      }
    },

    // 试驾信息编辑功能
    confirmEditInfo() {
      this.editForm.pre_buy_date = moment(this.editForm.pre_buy_date).format('YYYY-MM-DD')
      editDrive(this.editForm)
        .then(() => {
          this.$message({
            type: 'success',
            message: '试驾信息编辑成功!'
          })
          this.editClose()
          this.searchHandle()
        })
        .catch(err => {
        })
    },

    // 打开编辑框
    editOpen(data) {
      this.editForm = {
        dealer_code: data.dealer_code,
        dealer_name: data.dealer_name,
        sell_user: data.sell_user,
        pre_buy_date: data.pre_buy_date,
        remark: data.remark,
        drive_id: data.drive_id,
        sell_id: data.sell_id
      }
      this.editDialog = true
    },
    // 打开经销商选择框
    dealerOpen() {
      this.openSelectDealer = true
      this.editDialog = false
    },
    // 关闭编辑框
    editClose() {
      this.editForm = {
        dealer_name: '',
        sell_user: '',
        pre_buy_date: '',
        remark: '',
        drive_id: ''
      }
      this.editDialog = false
    },
    // 关闭经销商选择框
    dealerClose() {
      this.editDialog = true
      this.openSelectDealer = false
    },

    // 销售顾问框打开
    sellOpen() {
      this.openSelectSell = true
      this.editDialog = false
    },

    // 销售顾问框关闭
    sellClose() {
      this.editDialog = true
      this.openSelectSell = false
    },

    // 导出
    exportData() {
      exportDrive(this.search)
        .then(res => {
          for (let i = 0; i < res.length; i++) {
            res[i].dirve_date = moment(res[i].dirve_date).format('YYYY-MM-DD HH:mm')
            res[i].pre_buy_date = moment(res[i].pre_buy_date).format('YYYY-MM-DD HH:mm')
          }
          const option = {
            tHeader: ['客户名称', '电话', '意向车型', '经销商', '销售顾问', '试驾时间', '预购时间', '备注'],
            filterVal: ['user_name', 'phone', 'series_name', 'dealer_name', 'sell_user', 'dirve_date', 'pre_buy_date', 'remark'],
            table: res,
            fileName: '试驾信息导出'
          }
          exportFile(option, () => {
          })
        })
        .catch(err => {})
    },

    // 日期格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return ''
      }
    }

  }
}
</script>

<style scoped>
</style>
